<template>
  <div class="editPage__video">
    <div class="title"></div>
    <div class="img__con">
      <el-upload
        class="avatar-uploader"
        :action="uploadImgUrl"
        :file-list="fileList"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
        :on-progress="uploadVideoProcess"
        :on-remove="uploadVideoRemove"
        :disabled="disabled"
        drag
      >
        <i class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
      <!-- <el-progress
        v-if="videoFlag == true"
        type="line"
        :percentage="videoUploadPercent"
        style="margin-top: 30px"
      ></el-progress> -->

      <p style="font-size: 12px !important">{{ $t("format") }}</p>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      default: "",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      fileList: [],
      // 视频上传
      uploadImgUrl: "",
      // 应付多个组件的情况 记录当前组件的key值
      componentKey: null,
      menuKey: 1, // 用来强制刷新
      videoFlag: false, // 进度条相关的
      videoUploadPercent: 0, // 进度条相关的
      token: "",
    };
  },
  computed: {
    imageUrl() {
      return this.value;
    },
  },
  mounted() {
    this.uploadImgUrl = `${this.$api}/cms/web/upload`;
    // this.token = getToken();
  },
  methods: {
    // 上传成功的函数
    handleAvatarSuccess(res, file) {
      console.log(file);
      // 进度条恢复到初始状态
      this.videoFlag = false;
      this.videoUploadPercent = 0;
      ++this.menuKey;
      // console.log(res);
      this.emitVideo(res);
      this.fileList = [{ name: file.name, url: res }];
    },
    emitVideo(val) {
      this.$emit("emitVideo", val);
    },
    uploadVideoRemove() {
      this.$emit("emitVideo", "");
    },
    beforeAvatarUpload(file) {
      console.log("beforeAvatarUpload");
      // 进度条恢复到初始状态
      this.videoFlag = false;
      this.videoUploadPercent = 0;
      //   file.type === "image/jpg" ||
      //   file.type === "image/png";
      console.log(file.type);
      const isMp4 =
        file.type.indexOf("doc") > -1 ||
        file.type.indexOf("pdf") > -1 ||
        file.type.indexOf("zip") > -1;
      // 限制文件最大不能超过 300M
      const isLt2M = file.size / 1024 / 1024 < 300;

      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 300MB!");
      }
      return isLt2M;
    },

    //进度条
    uploadVideoProcess(event, file, fileList) {
      console.log(event, file, fileList);
      this.videoFlag = true;
      this.videoUploadPercent = parseInt(file.percentage);
    },
  },
};
</script>
<style lang="scss" scoped>
.editPage__video {
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 38px;
    color: #8c939d;
    width: 350px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    margin-top: 80px;
    width: calc(100% - 60px);
  }
  .avatar {
    width: 350px;
    height: auto;
    display: block;
  }
  .title {
    font-size: 18px;
    margin-bottom: 20px;
  }
  .img__con {
    .el-button {
      width: 100%;
      margin: 10px 0 20px 0;
    }
  }
}
</style>
